<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: 0 }">
      <div class="padding-add">
        <el-form
          ref="userFrom"
          :model="userFrom"
          label-width="80px"
          label-position="right"
          @submit.native.prevent
          inline
        >
          <div class="acea-row search-form" v-if="!collapse">
            <div>
              <el-form-item label="国内外：" label-for="originSite">
                <el-select v-model="userFrom.originSite" placeholder="请选择用户等级" class="form_content_width">
                  <el-option value="cn" label="国内">国内</el-option>
                  <el-option value="com" label="国外">国外</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="询价编号:" label-for="priceNo">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.priceNo" class="form_content_width" />
              </el-form-item>
              <el-form-item label="产品名称:" label-for="pName">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.pName" class="form_content_width" />
              </el-form-item>
              <el-form-item label="产品型号:" label-for="pModel">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.pModel" class="form_content_width" />
              </el-form-item>
            </div>
            <el-form-item class="search-form-sub">
              <el-button type="primary" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
          <div v-if="collapse" class="acea-row search-form">
            <div class="search-form-box">
              <el-form-item label="国内外：" label-for="originSite">
                <el-select v-model="userFrom.originSite" placeholder="请选择用户等级" class="form_content_width">
                  <el-option value="cn" label="国内">国内</el-option>
                  <el-option value="com" label="国外">国外</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="询价编号:" label-for="priceNo">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.priceNo" class="form_content_width" />
              </el-form-item>
              <el-form-item label="产品名称:" label-for="pName">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.pName" class="form_content_width" />
              </el-form-item>
              <el-form-item label="产品型号:" label-for="pModel">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.pModel" class="form_content_width" />
              </el-form-item>
              <el-form-item label="询价用户昵称:" label-for="priceName" label-width="110px">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.priceName" class="form_content_width" />
              </el-form-item>

              <el-form-item label="联系人:" label-for="linkName" v-if="userFrom.originSite == 'cn'">
                <el-input clearable placeholder="请输入内容" v-model="userFrom.linkName" class="form_content_width" />
              </el-form-item>
              <el-form-item label="登录邮箱:" label-for="userEmail" v-else>
                <el-input clearable placeholder="请输入内容" v-model="userFrom.userEmail" class="form_content_width" />
              </el-form-item>

              <el-form-item label="创建时间:" label-for="date_time">
                <el-date-picker
                  v-model="userFrom.dateTime"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>

            <el-form-item class="search-form-sub">
              <el-button type="primary" label="default" @click="userSearchs">搜索</el-button>
              <el-button class="ResetSearch" @click="reset('userFrom')">重置</el-button>
              <a class="ivu-ml-8 font12 ml10" @click="collapse = !collapse">
                <template v-if="!collapse"> 展开 <i class="el-icon-arrow-down" /> </template>
                <template v-else> 收起 <i class="el-icon-arrow-up" /> </template>
              </a>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-tabs v-model="userFrom.user_type" @tab-click="onClickTab">
        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
      </el-tabs>
      <el-table
        :data="userLists"
        class="mt16"
        ref="table"
        highlight-current-row
        v-loading="loading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        @sort-change="sortChanged"
        @select="handleSelectRow"
        @select-all="handleSelectAll"
      >
        <el-table-column label="ID" min-width="35">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="UID" min-width="35">
          <template slot-scope="scope">
            <span>{{ scope.row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="询价编号" min-width="35">
          <template slot-scope="scope">
            <span>{{ scope.row.enquiry_no }}</span>
          </template>
        </el-table-column>
        <el-table-column label="询价用户昵称" min-width="50">
          <template slot-scope="scope">
            <span>{{ scope.row.user_nick }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商家信息" min-width="60">
          <template slot-scope="scope">
            <div class="w200" v-if="scope.row.shop_type == 0">
              <div class="textal">
                <i> {{ scope.row.auth_type == 2 ? '企业名称' : '真实姓名' }}: </i>
                {{ scope.row.shop_name }}
              </div>
            </div>
            <div class="w200" v-else>
              <div class="textal">平台自营</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="国家" min-width="80" v-if="userFrom.originSite == 'com'">
          <template slot-scope="scope">
            <span>{{ scope.row.country_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登录邮箱" min-width="120" v-if="userFrom.originSite == 'com'">
          <template slot-scope="scope">
            <span>{{ scope.row.user_email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品型号" min-width="50" v-if="userFrom.originSite == 'cn'">
          <template slot-scope="scope">
            <span>{{ scope.row.product_model }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" min-width="80">
          <template slot-scope="scope">
            <div class="scrollable-cell">
              <div class="tabBox_img" v-viewer>
                <img v-lazy="scope.row.product_cover" />
              </div>
            </div>
            <div>{{ scope.row.product_title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="机型" min-width="50" :sortable="true" v-if="userFrom.originSite == 'cn'">
          <template slot-scope="scope">
            <span v-if="scope.row.new_rate">新机</span>
            <span v-else>旧机</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" min-width="50" v-if="userFrom.originSite == 'cn'">
          <template slot-scope="scope">
            <span>{{ scope.row.contact_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="询价内容" min-width="50" v-if="userFrom.originSite == 'cn'">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.message">
                <div>{{ scope.row.message }}</div>
                <div class="flex jcc aic gap10">
                  <div v-for="(item, index) in scope.row.file" :key="index">
                    <div class="tabBox_img" v-viewer v-if="item.type == 'png'">
                      <img v-lazy="scope.row.item.file" />
                    </div>
                    <div v-else>
                      <a :href="item.file">
                        <img class="w20 ofc" :src="item.imgSrc" alt />
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          key="13"
          prop="contact_phone"
          width="140"
          label="联系电话"
          v-if="userFrom.originSite == 'cn'"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <template>
              <a @click="userDetail(scope.row)">处理</a>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="userFrom.page"
          :limit.sync="userFrom.limit"
          @pagination="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getShopAuth, getProvinceFn, getLocalInquiry, getOverseasInquiry } from '@/api/all';
export default {
  name: '',
  components: {},
  data() {
    let self = this;
    return {
      userFrom: {
        originSite: 'cn',
        priceNo: '',
        pName: '',
        pModel: '',
        priceName: '',
        linkName: '',
        userEmail: '',

        dateTime: '',
        user_type: '',
        page: 1,
        limit: 10,
      },

      collapse: false,
      selectLabelShow: false,
      selectDataLabel: [],
      address: '',
      headeNum: [
        { type: '', name: '全部' },
        { type: 'routine', name: '平台自营' },
        { type: 'routine1', name: '商家自营' },
      ],
      userLists: [],
      total: 0,
    };
  },
  watch: {},
  computed: {},
  async created() {
    // const res = [];
    // if (this.userFrom.originSite == 'cn') {
    //   res = await getLocalInquiry({
    //     auth_type: 2,
    //     page: 1,
    //     size: 10,
    //     status: 0,
    //     shop_type: -1,
    //   });
    // } else {
    //   res = await getOverseasInquiry();
    // }

    const res = await getLocalInquiry({
      auth_type: 2,
      page: 1,
      size: 10,
      status: 0,
      shop_type: -1,
    });

    res.data.data.forEach((el) => {
      el.product_cover = this.imgOssUrl + el.product_cover;
    });

    res.data.data.forEach((i) => {
      if (i.attachments) {
        i.file = i.attachments;
        if (i.file) {
          i.file.forEach((i) => {
            if (i.type == 'pdf') {
              i.imgSrc = this.imgOssUrl + '/images/PC/index/houtai/pdf.png';
            }
            if (i.type == 'xlsx' || i.type == 'xls') {
              i.imgSrc = this.imgOssUrl + '/images/PC/index/houtai/excel.png';
            }
            if (i.type == 'docx' || i.type == 'doc') {
              i.imgSrc = this.imgOssUrl + '/images/PC/index/houtai/word.png';
            }
            i.file = this.imgOssUrl + item.file;
          });
        }
      }
    });
    this.userLists = res.data.data;
    this.total = res.data.total;
  },
  mounted() {},
  methods: {
    openSelectLabel() {
      this.selectLabelShow = true;
    },

    async provinceFn(pid) {
      const res = await getProvinceFn({ pid: pid });
      return res.data;
    },

    //地址选择
    handleChange(label) {
      this.address = label;
      console.log(this.address);
    },

    userSearchs() {
      console.log(this.userFrom);
    },
    reset() {
      this.userFrom = {
        userName: '',
        userEmail: '',
        userPhone: '',
        dateTime: '',
        nickName: '',
      };
    },
    pageChange() {},
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__item {
  height: 54px !important;
  line-height: 54px !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 24px;
    font-weight: 500;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.userFrom {
  ::v-deep .ivu-form-item-content {
    margin-left: 0px !important;
  }
}

.userAlert {
  margin-top: 20px;
}

.userI {
  color: var(--prev-color-primary);
  font-style: normal;
}

img {
  height: 36px;
  display: block;
}

.tabBox2_img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
.tabBox_img-box {
  display: flex;
}
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}

.modelBox {
  ::v-deep .ivu-modal-body {
    padding: 0 16px 16px 16px !important;
  }
}

.vipName {
  color: #dab176;
}

.listbox {
  ::v-deep .ivu-divider-horizontal {
    margin: 0 !important;
  }
}

.labelInput {
  width: 250px;
  border: 1px solid #dcdee2;
  padding: 0 15px;
  border-radius: 5px;
  min-height: 30px;
  cursor: pointer;
  font-size: 12px;
  .span {
    color: #c5c8ce;
  }

  .ivu-icon-ios-arrow-down {
    font-size: 14px;
    color: #808695;
  }
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.search-form {
  display: flex;
  justify-content: space-between;
  .search-form-box {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
}
.search-form-sub {
  display: flex;
}
</style>

